<template>
  <a-card title="路由列表">
    <template #extra><a href="#" @click="addMicroAppRouter">新增</a></template>

    <a-table
      :dataSource="dataSource"
      :columns="columns"
      bordered
      :pagination="false"
    >
      <template #bodyCell="{ column, record, index }">
        <template v-if="column.key === 'index'">
          {{ index + 1 }}
        </template>
        <template v-else-if="['status', 'type'].includes(column.key)">
          {{ column.render(column, record, column.key) }}
        </template>
        <template v-else-if="column.key === 'icon'">
          <component
            :is="record.icon"
            :name="record.icon"
            style="font-size: 18px"
          />
        </template>
        <template v-else-if="column.key === 'action'">
          <a @click="handelEdit(record)">编辑</a>
          <a-divider type="vertical" />
          <a @click="handelDelete(record)" style="color: red">删除</a>
        </template>
      </template>
    </a-table>
  </a-card>
</template>


<script setup>
import { onMounted, ref } from "vue";
import { useRouter } from "vue-router";
import { message } from "ant-design-vue";
import { microAppRouterList, microAppRouterDelete } from "@/api/microApp";
import FormIcon from "@/components/FormIcon";

const router = useRouter();
const columns = [
  {
    title: "名称",
    dataIndex: "title",
    key: "title",
  },
  {
    title: "类型",
    dataIndex: "type",
    key: "type",
    render: (column, record, key) => {
      const typeMaps = {
        1: "目录",
        2: "内链",
        3: "外链",
      };
      return typeMaps[record[key] - 0];
    },
  },
  {
    title: "路径",
    dataIndex: "path",
    key: "path",
  },
  {
    title: "icon",
    dataIndex: "icon",
    key: "icon",
  },
  {
    title: "排序",
    dataIndex: "orderNum",
    key: "orderNum",
  },
  {
    title: "状态",
    dataIndex: "status",
    key: "status",
    render: (column, record, key) => {
      return record[key] - 0 === 1 ? "使用" : "禁用";
    },
  },
  {
    title: "操作",
    key: "action",
  },
];

const dataSource = ref([]);

const getList = async () => {
  const { data, success } = await microAppRouterList();
  if (!success) return;
  dataSource.value = data?.rows || [];
};
// 删除
const handelDelete = async (record) => {
  console.log(record);
  const { msg, success } = await microAppRouterDelete({ id: record.id });
  if (success) {
    message.success(msg);
    getList();
  } else {
    message.error(msg);
  }
};
// 新增
const addMicroAppRouter = () => {
  router.push({
    path: "/microAppRouter/add",
  });
};

// 编辑
const handelEdit = (record) => {
  router.push({
    path: "/microAppRouter/add",
    query: {
      id: record.id,
    },
  });
};

onMounted(() => {
  getList();
});
</script>
